<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    [class^='progress-'] {
        width: 120px;
        height: 20px;
        border-radius: 20px;
        margin: 20px auto 50px auto;
    }

    @keyframes p {
        100% {
            background-size: 100%;
        }
    }


    .progress-1 {
        /*background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd ;*/
        background: linear-gradient(#000 0 100%)  0/0% no-repeat #ddd;
        animation: p 3s infinite linear;
    /*    step(10) <=>step(10, end)*/
    }

    @keyframes p2 {
        100% {
            background-size: 110%;
        /*    因为step 为10 所以是 100% + (1/10)* 100% */
        }
    }
    .progress-2 {
        background: linear-gradient(orange 0 0) 0/0% no-repeat lightblue;
        animation: p2 3s infinite steps(10);
    }

    .progress-3 {
        background: repeating-linear-gradient(135deg, #f03355 0 10px, #ffa516 0 20px) 0/0% no-repeat,
                    repeating-linear-gradient(135deg, #dddddd 0 10px, #eee 0 20px) 0/100%;
        animation: p 3s infinite;
    }
    @keyframes p4 {
        100% {
            background-size: 120%;
        }
    }
    .progress-4 {

        border-radius: 0;
        -webkit-mask: linear-gradient(90deg, #000000 70%, #0000 0) 0/20%;
        background: linear-gradient(#000000 0 0) 0/0% no-repeat #add;
        animation: p4 3s infinite steps(6);
    }

    @keyframes p5 {
        100% {
            background-size: 120%;
        }
    }
    .progress-5 {
        border-radius: 0;
        width: 80px;
        height: 40px;
        border: 2px solid #000000;
        padding: 3px;
        background: repeating-linear-gradient(90deg, #000 0 10px, #0000 0 16px ) 0/0% no-repeat content-box content-box;
        position: relative;
        animation: p5 3s infinite steps(6);
    }
    .progress-5::before {
        content: '';
        position: absolute;
        top: 50%;
        right: -14px;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        border-style: solid;
        border-color: #000000 #000000 #000000 #fff;
        border-width: 2px;
    }

    @keyframes p6 {
        100% {
            inset: 0;
        }
    }
    .progress-6 {
        height: 22px;
        color: #514b82;
        border: 2px solid;
        position: relative;
    }
    .progress-6::before {
        content: '';
        position: absolute;
        margin: 2px;
        inset: 0 100% 0 0;
        border-radius: inherit;
        background-color: #514b82;
        animation: p6 3s infinite;
    }
    .progress-7 {
        height: 24px;
        -webkit-mask:
                radial-gradient(circle closest-side,#000 94%,#0000) 0 0/25% 100%,
                linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
        background: linear-gradient(#25b09b 0 0) 0/0% no-repeat;
        animation: p 3s infinite linear;
    }

    @keyframes p8 {
        100% {
            background-size: 115%;
        }
    }
    .progress-8 {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        -webkit-mask: linear-gradient(0deg, #000 55%, #0000 0) bottom/100% 18.18%;
        background: linear-gradient(#f03355 0 100%) bottom/100% 0% no-repeat #ddd;
        animation: p8 3s infinite steps(7);
    }

    @keyframes p9 {
        33% {
            background-position: 0 33%, 100% 33%, 200% 33%;
        }
        66% {
            background-position: -100% 66%, 0 66%, 100% 66%;
        }
        100% {
            background-position: 0 100%, 100% 100%, 200% 100%;
        }
    }
    .progress-9 {
        --r1: 154%;
        --r2: 68.5%;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: radial-gradient(var(--r1) var(--r2) at top,#0000 79.5%, #269af2 80%) center left,
        radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%, #0000 80%) center center,
        radial-gradient(var(--r1) var(--r2) at top,#0000 79.5%, #269af2 80%) center right, #ccc;
        background-size: 50.5% 220%;
        background-position: -100% 0, 0% 0%, 100% 0;
        background-repeat: no-repeat;
        animation: p9 3s infinite linear;
    }

    @keyframes p10 {
        100% {
            background-size: 120% 120%;
        }
    }
    .progress-10 {
        height: 60px;
        border-radius: 200px 200px 0 0;
        -webkit-mask:repeating-radial-gradient(farthest-side at bottom ,#0000 0,#000 1px 12%,#0000 calc(12% + 1px) 20%);

        background:
                radial-gradient(farthest-side at bottom,#514b82 0 95%,#0000 0) bottom/0% 0% no-repeat
                #ddd;
        animation: p10 3s infinite steps(6);
    }
</style>
<body>
<!--平滑加载-->
<div class="progress-1"></div>
<!--按步加载-->
<div class="progress-2"></div>
<!--条纹加载-->
<div class="progress-3"></div>
<!--虚线加载-->
<div class="progress-4"></div>
<!--电池加载-->
<div class="progress-5"></div>
<!--内加载-->
<div class="progress-6"></div>
<!--珠链加载-->
<div class="progress-7"></div>
<!--斑马线-->
<div class="progress-8"></div>
<!--水柱加载-->
<div class="progress-9"></div>
<!--信号加载-->
<div class="progress-10"></div>
</body>
</html>
